<template>
    <div>
        <el-dialog :title="'已分配接口'" :close-on-click-modal="false" :visible.sync="visible">
            <el-button type="primary" size="small" @click="addApiHandle()">添加接口</el-button>
            <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
                <el-table-column prop="apiName" header-align="center" align="center" label="接口名称" />
                <el-table-column prop="apiUrl" header-align="center" align="center" label="接口url" />
                <el-table-column prop="createDate" header-align="center" align="center" label="创建时间" />
                <el-table-column prop="updateDate" header-align="center" align="center" label="更新时间" />
                <el-table-column header-align="center" align="center" width="80" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="deleteHandle(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
                layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false">关闭</el-button>
            </span>
        </el-dialog>
        <permission-add-api v-if="permissionAddApiVisible" ref="permissionAddApiVisible" @refreshApiList="getApiList" />
    </div>
</template>

<script>
import PermissionAddApi from './permission-add-api'

export default {
    data() {
        return {
            id: null,
            visible: false,
            dataList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            dataListSelections: null,
            permissionAddApiVisible: false
        }
    },
    components: {
        PermissionAddApi
    },
    methods: {
        init(id) {
            console.log("asdfasdf")
            this.id = id || 0
            this.visible = true
            this.getApiList();
        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getApiList()
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val
            this.getApiList()
        },
        // 查询api接口列表
        getApiList() {
            this.$http({
                url: `/pms/admin/api/listApiByPermissionId`,
                method: 'post',
                data: {
                    permissionId: this.id,
                    pageInfo: {
                        pageNum: this.pageIndex,
                        pageSize: this.pageSize
                    }
                }
            }).then((response) => {
                if (response && response.code == "0") {
                    this.dataList = response.data;
                    this.totalPage = response.total;
                } else {
                    this.$message.error(response.message)
                }
            })
        },
        // 弹出添加api接口弹窗
        addApiHandle() {
            this.permissionAddApiVisible = true;
            this.$nextTick(() => {
                this.$refs.permissionAddApiVisible.init(this.id)
            })
        },
        deleteHandle(id) {
            this.$confirm(`确定要删除吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http({
                    url: '/pms/admin/permission/deletePermissionApi',
                    method: 'post',
                    data: {
                        permissionId: this.id,
                        apiIds: [id]
                    }
                }).then((response) => {
                    if (response && response.code == "0") {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1000,
                            onClose: () => {
                                this.getApiList()
                            }
                        })
                    } else {
                        this.$message.error(response.message)
                    }
                })
            })
        }
    }
}
</script>

<style scoped lang="scss">
.el-select {
    width: 100%
}

.el-radio-group {
    display: flex;
    height: 40px;
    align-items: center;
}
</style>
